<template>
	<view class="nav-top">
		<view class="left" @click="addAddress()">
			<view class="icon map"></view>
			<view class="address">{{ showtext }}</view>
			<view class="icon arrow"></view>
		</view>
		<view class="right" @click="toShare()">
			<view class="icon kefu"></view>
		</view>
		<sharesdk ref="sharesdk" :contentHeight="480"></sharesdk>
	</view>
</template>

<script>
	import map_tx from '@/common/map/qqmap-wx-jssdk.min.js'
	import location from '@/common/localstorage/localstorage.js'
	import sharesdk from '@/components/share/share.vue'
	export default {
		components: {
			sharesdk
		},
		data() {
			return {
				showtext: '需手动开启定位',
				address: {
					lat: '',
					lng: '',
					city: '',
					district: '',
					nation: '',
					province: '',
					details: '',
					street_number: ''
				}
			};
		},
		onLoad: function() {

		},
		methods: {
			initMylocation() {
				let that = this;
				location.getStorage({
					key: 'mylocationforindex',
					success: function(res) {
						let result = JSON.parse(res)
						that.address = result;
						that.showtext = result.details;
					},
					fail: function() {
						// #ifndef H5
						that.getLocationWeixin();
						// #endif
						// #ifdef H5
						// this.$ShareSdk.Share()
						that.getMyloactionH5()
						// #endif
					},
				})
			},
			getLocationWeixin() {
				let that = this;
				this.showtext = '正在获取位置...';
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						that.openAddress(res.latitude, res.longitude)
					},
					fail(res) {
						console.log(res)
						that.showtext = '需手动开启定位';
					},
					complete() {}
				});
			},
			getMyloactionH5() {
				let that = this;
				that.showtext = '正在获取位置...';
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
						var lng = r.point.lng;
						var lat = r.point.lat;
						var addressdetails = r.address.city + r.address.district + r.address.street + r.address.street_number;
						that.reverseGeocoderH5({
							latitude: lat,
							longitude: lat,
							city: r.address.city,
							province: r.address.province,
							country: '中国',
							details: addressdetails,
							district: r.address.district,
							street_number: r.address.street_number
						})
						that.showtext = addressdetails;
						
					} else that.showtext = '需手动开启定位';
				}, {
					enableHighAccuracy: true,
					maximumAge: 18000,
					timeout: 18000
				});
			},
			reverseGeocoderH5(addr) {
				let that = this;
				let address = {
					lat: addr.latitude,
					lng: addr.longitude,
					city: addr.city,
					province: addr.province,
					nation: addr.country,
					details: addr.details,
					district: addr.district,
					street_number: addr.street_number
				}
				location.setStorage({
					key: 'mylocationforindex',
					jsonstr: JSON.stringify(address),
					success: function() {
						that.showtext = addr.street_number || '手动开启定位';
					}
				});
			},
			openAddress(lat, lng) {
				let that = this;
				let map = new map_tx({
					key: 'JHDBZ-SGWK5-SVEIU-QZMEF-JPTUO-K6B2M'
				});
				map.reverseGeocoder({
					location: {
						latitude: lat,
						longitude: lng
					},
					success(res, data) {
						console.log(data);
						if (res.status == 0) {
							let result = data.reverseGeocoderSimplify;
							that.address = {
								lat: result.latitude,
								lng: result.longitude,
								city: result.city,
								province: result.province,
								nation: result.nation,
								details: result.address,
								district: result.district,
								street_number: result.street_number
							}
							that.showtext = result.address || '手动开启定位';

							location.setStorage({
								key: 'mylocationforindex',
								jsonstr: JSON.stringify(that.address)
							});
						}

					},
					complete(res) {
						console.log(res)
					}
				});
			},
			toShare() {
				this.$refs.sharesdk.toggleMask();
				// #ifdef H5

				// #endif
				// #ifdef MP-WEIXIN

				// #endif
			},
			addAddress() {
				uni.navigateTo({
					url: "../../pages/search/search"
				})
			}
		},
		mounted: function() {
			this.initMylocation();
		}
	};
</script>

<style lang="scss" scoped="">
	.nav-top {
		width: 100%;
		height: 50px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff;

		.icon {
			background-size: 48upx;
			background-repeat: no-repeat;
			background-position: 50%;
		}

		.left {
			width: 80%;
			height: 100%;
			line-height: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.map {
				background-image: url('../../static/index/map.png');
				width: 80upx;
			}

			.arrow {
				background-image: url('../../static/index/right.png');
				width: 80upx;
			}

			.address {
				max-width: calc(100% - 160upx);
				font-size: 28upx;
				color: #333333;
				font-weight: 600;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.right {
			width: 20%;
			height: 100%;
			justify-content: flex-end;

			.kefu {
				width: 100%;
				height: 100%;
				background-image: url('../../static/index/share.png');
			}
		}
	}
</style>
